<template>
  <div class="content">
    <el-row :gutter="5">
      <el-col :span="4">
        <el-input size="small" placeholder="请输入要搜索的key" v-model="seachVal" clearable></el-input>
      </el-col>
      <el-col :span="2"><el-button size="small" plain @click="searchKey()" type="primary">搜索</el-button></el-col>
      <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="5" style="margin-top:20px;">
      <el-col :span="24">
        <el-table v-loading="loading" :data="result" ref="Tables" border max-height="475" style="width: 100%;">
          <el-table-column prop="key" style="height:50px;" label="keys" width="180"></el-table-column>
          <el-table-column prop="r" label="values" width="600"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="edit(scope.row.key,scope.$index)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.key,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogFormVisible" :show-close="showClose">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-input size="small" type="text" clearable autosize placeholder="分数" v-model="addKey"></el-input>
        </el-col>
        <el-col :span="12">
          <el-input size="small" type="textarea" clearable autosize placeholder="value" v-model="addValue"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="primary" @click="add()">添加</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top:20px;" v-for="(value,vindex) in editValue" :key="vindex">
        <el-col :span="20" type="flex" align="middle" justify="end">
          <el-input size="small" type="text" v-model="editValue[vindex]">
            <template slot="prepend">{{vindex}}</template>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="danger" @click="delRow(vindex,editValue[vindex])">删除</el-button>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="makeSure()">保存修改</el-button>
      </div>
    </el-dialog>

    <el-pagination style="margin-top:10px;" background layout="prev, pager, next" :page-size="pagesize" @current-change="pcurrent" :total="resultNum"></el-pagination>
  </div>
</template>

<script>
import { postData } from '../js/axios'
export default {
  data () {
    return {
      result: [],
      showShade: false,
      shwoEditLayer: false,
      editValue: '',
      editKey: '',
      curPage: 1,
      pageNum: 0,
      seachVal: '',
      resultNum: 0,
      addKey: '',
      addValue: '',
      indx: '',
      pagesize: 8,
      dialogFormVisible: false,
      showClose: false,
      loading: true
    }
  },
  methods: {
    pcurrent: function (res) {
      this.curPage = res
      this.getData()
    },
    add: function () {
      if (this.addKey === '' || this.addValue === '') {
        // alert('分数和value不能为空')
        this.showMessage('分数和value不能为空', 'error', 1000)
        return false
      }
      if (this.editValue[this.addKey] !== undefined) {
        this.addKey = ''
        this.addValue = ''
        // alert('分数重复')
        this.showMessage('分数重复', 'error', 1000)
        return false
      }
      for (let k in this.editValue) {
        if (this.editValue[k] === this.addValue) {
          this.addKey = ''
          this.addValue = ''
          // alert('value重复')
          this.showMessage('value重复', 'error', 1000)
          return false
        }
      }
      console.log(this.editValue)
      this.editValue[this.addKey] = this.addValue
      // console.log('this:::', this.editValue)
      this.addKey = ''
      this.addValue = ''
    },
    searchKey: function () {
      console.log(this.seachVal)
      this.curPage = 1
      this.getData()
    },
    del: function (key, index) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let Obj = {}
        Obj.selectedServer = this.selectedServer
        Obj.db = this.db
        Obj.auth = this.auth
        Obj.key = key
        postData('del.php', Obj)
          .then(res => {
            console.log(res)
            if (res === 1 || res === 0) {
              this.getData()
            }
          })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    edit: function (key, index) {
      this.indx = index
      // this.showShade = true
      // this.shwoEditLayer = true
      this.editValue = this.result[index].value
      this.editKey = key
      this.dialogFormVisible = true
    },
    makeSure: function () {
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.key = this.editKey
      Obj.value = this.editValue
      Obj.type = 'zset'
      console.log(this.editValue)
      postData('setValue.php', Obj)
        .then(res => {
          console.log('makesure:', res)
          if (res >= 0) {
            this.getData()
            this.dialogFormVisible = false
          }
        })
    },
    delRow: function (vindex, value) {
      console.log(vindex)

      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.editKey, vindex, value)
        let Obj = {}
        Obj.selectedServer = this.selectedServer
        Obj.db = this.db
        Obj.auth = this.auth
        Obj.key = this.editKey
        Obj.score = vindex
        Obj.v = value
        console.log('value', value)
        postData('zsetdel.php', Obj)
          .then(res => {
            console.log('result:', res)
            if (res === 1) {
              let Obj = {}
              Obj.selectedServer = this.selectedServer
              Obj.db = this.db
              Obj.auth = this.auth
              Obj.page = this.curPage
              Obj.seachVal = this.seachVal
              Obj.dataType = 'zset'
              postData('get.php', Obj)
                .then(res => {
                  console.log('result:', res)
                  this.result = res.data
                  this.pageNum = res.pageNum
                  this.resultNum = res.resultNum
                  this.editValue = this.result[this.indx].value
                  this.getData()
                })
            }
          })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    editHide: function () {
      this.showShade = false
      this.shwoEditLayer = false
    },
    getData: function (callback = function () { console.log('default') }) {
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.page = this.curPage
      Obj.seachVal = this.seachVal
      Obj.dataType = 'zset'
      postData('get.php', Obj)
        .then(res => {
          this.loading = false
          console.log('result:', res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].r = JSON.stringify(res.data[i].value)
          }
          this.result = res.data
          this.pageNum = res.pageNum
          this.resultNum = res.resultNum
        })
    },
    showMessage: function (message, type, time) {
      this.$message({
        message: message,
        type: type,
        duration: time
      })
    }
  },
  created () {
    this.selectedServer = this.$store.state.selectedServer
    this.db = this.$store.state.database
    this.auth = this.$store.state.auth
    if (this.$store.state.selectedServer === '' || this.$store.state.database === '') {
      this.$router.push('/')
    } else {
      this.getData()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../css/common.styl'
</style>
